<template>
  <div class="header">
   <div class="header_content">
      <div class="header_left">
        <router-link :to="{path:'#'}">
        <img src="../../assets/images/logo/logo.png" alt="">
        </router-link>
      
    </div>
    <!-- header 数据循环 -->
    <div class="header_middle">
      <div class="header_middle_list"  v-for="(listData,index) in liData" :key="index" @mouseenter="mouseenterList(index)" @mouseleave="mouseleaveList(index)">
         <router-link :to="{path:'#'}">
              {{listData.title}}
         </router-link>

         <ul ref="ul">
           <li  v-for="(listDataChildren,index) in liData[index].children" :key="index">
              <router-link :to="{path:listDataChildren.url}">{{listDataChildren.title}} </router-link>
             </li>
         </ul>
      </div>
    </div>

    <div class="header_right">
       <router-link :to="{path:'#'}">导航</router-link>
    </div>
   </div>
    
   <div class="banner" @mouseenter="loop1" @mouseleave="loop2">
      <Carousel :autoplay="isAutoplay" v-model="bannerValue" loop>
        <CarouselItem>
            <div class="demo-carousel">
              <img src="../../assets/images/banner/1.jpg" alt="">
            </div>
        </CarouselItem>
        <CarouselItem>
            <div class="demo-carousel">
              <img src="../../assets/images/banner/2.jpg" alt="">
            </div>
        </CarouselItem>
        <CarouselItem>
            <div class="demo-carousel">
              <img src="../../assets/images/banner/3.jpg" alt="">
            </div>
        </CarouselItem>
    </Carousel>
   </div>


  </div>
</template>

<script>
export default {
  name: "header_",
  data() {
    return {
      isAutoplay:true,
      bannerValue: 0,
      // header数据
      liData: [
        {
          title: "首页"
        },
        {
          title: "关于蚂蚁",
          children: [
            {
              title: "关于蚂蚁1",
              url: "#1"
            },
            {
              title: "关于蚂蚁2",
              url: "#2"
            },
            {
              title: "关于蚂蚁3",
              url: "#2"
            },
            {
              title: "关于蚂蚁4",
              url: "#2"
            }
          ]
        },
        {
          title: "新闻中心",
          children: [
            {
              title: "新闻中心1",
              url: "#"
            },
            {
              title: "新闻中心2",
              url: "#"
            },
            {
              title: "新闻中心3",
              url: "#"
            },
            {
              title: "新闻中心4",
              url: "#"
            }
          ]
        },
        {
          title: "蚂蚁模式",
          children: [
            {
              title: "蚂蚁模式1",
              url: "#"
            },
            {
              title: "蚂蚁模式2",
              url: "#"
            },
            {
              title: "蚂蚁模式3",
              url: "#"
            },
            {
              title: "蚂蚁模式4",
              url: "#"
            }
          ]
        },
        {
          title: "联系我们",
          children: [
            {
              title: "联系我们1",
              url: "#"
            },
            {
              title: "联系我们2",
              url: "#"
            },
            {
              title: "联系我们3",
              url: "#"
            },
            {
              title: "联系我们4",
              url: "#"
            }
          ]
        }
      ]
    };
  },
  methods: {
    mouseenterList(index) {
      this.$refs.ul[index].style.cssText = "display:block";
      if (index == 0) {
        this.$refs.ul[index].style.cssText = "display:none";
      }
    },
    mouseleaveList(index) {
      this.$refs.ul[index].style.cssText = "display:none";
    },
    loop1(){
      this.isAutoplay = false;
    },
    loop2(){
      this.isAutoplay = true;
    }
  },
  mounted() {
  
  }
};
</script>

<style scoped>
.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  font-size: 14px;
  color: #eee;
}
.header_content {
  width: 80%;
  height: 90px;
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  position: relative;
  z-index: 100;
  color: #eee;
}

.header_left img {
  max-width: 118px;
  height: auto;
}
a {
  color: #eee;
}
a:hover {
  cursor: pointer;
  color: #fff;
}
.header_middle {
  margin-left: 200px;
  display: flex;
  flex-flow: row nowrap;
  position: relative;
}
.header_middle .header_middle_list {
  position: relative;
  margin-left: 30px;
  width: 60px;
  height: 70px;
  line-height: 70px;
  color: #fff;
  text-align: center;
}
.header_middle_list ul {
  display: none;
  border-top: 4px solid #000;
  position: absolute;
  top: -1px;
  margin-top: 70px;
  padding-top: 20px;
  left: -35px;
  width: 120px;
  min-height: 180px;
  border-top: 4px solid #000;
  background-color: #000;
  opacity: 0.8;
}
.header_middle_list ul:before {
  background: #000;
  position: absolute;
  width: 6px;
  height: 6px;
  top: -7px;
  left: 47%;
  /* z-index: 9; */
  content: "";
  border: 0;
  transform: rotate(45deg);
}
.header_middle_list ul li {
  text-align: center;
  list-style: none;
  width: 100%;
  height: 30px;
  line-height: 30px;
}
.header_middle_list ul li:hover {
  background: #1897cd;
}
.header_right {
  position: absolute;
  right: 30px;
}

.banner {
  margin-top: -100px;
}
.banner img {
  width: 100%;
}
</style>
